<template>
  <div class="questions-preview">
    <!-- 预览文本框 -->

    <el-row>
      <el-col :span="6">
        【题型】:
        <template>
          <span v-if="QuestionsPartData.questionType==1">单选</span>
          <span v-else-if="QuestionsPartData.questionType==2">多选</span>
          <span v-else>简答</span>
        </template>
      </el-col>
      <el-col :span="6">【编号】:{{QuestionsPartData.id}}</el-col>
      <el-col :span="6">
        【难度】:
        <template>
          <span v-if="QuestionsPartData.difficulty==1">简单</span>
          <span v-else-if="QuestionsPartData.difficulty==2">一般</span>
          <span v-else>困难</span>
        </template>
      </el-col>
      <el-col :span="6">【标签】:{{QuestionsPartData.tags}}</el-col>
      <el-col :span="6">【学科】:{{QuestionsPartData.subjectName}}</el-col>
      <el-col :span="6">【目录】:{{QuestionsPartData.directoryName}}</el-col>
      <el-col :span="6">【方向】:{{QuestionsPartData.direction}}</el-col>
    </el-row>
    <hr>
    <el-row>
      <el-col class="question">
        【题干】:
        <template>
          <span v-html="QuestionsPartData.question"></span>
        </template>
        <template>
          <div v-if="QuestionsPartData.questionType!=3">
            <p>&nbsp;</p>
            <span>{{QuestionsPartData.questionType==1?'单选题':"多选题"}} 选项：（以下选中的选项为正确答案）</span>
            <div v-if="QuestionsPartData.questionType==1">
              <el-radio
                :disabled="item.isRight===0"
                v-model="radio"
                :label="item.isRight"
                v-for="(item,index) in QuestionsPartData.options"
                :key="index"
              >{{item.title}}</el-radio>
            </div>
            <div v-else-if="QuestionsPartData.questionType==2">
              <el-checkbox
                :label="item.title"
                v-for="(item,index) in QuestionsPartData.options"
                :key="index"
                :checked="item.isRight==1"
                disabled
              ></el-checkbox>
            </div>
          </div>
        </template>
      </el-col>
    </el-row>
    <hr>
    <el-row>
      <el-col>
        【参考答案】:
        <el-button type="danger" @click="isVadio=!isVadio">视频答案预览</el-button>
        <template>
          <div :class="isVadio?'':'none'">
            <video src="../../assets/276984.mp4" controls="controls" width="300px" height="250px"/>
          </div>
        </template>
      </el-col>
    </el-row>
    <hr>
    <el-row>
      <el-col class="answer">
        【答案解析】:
        <template>
          <span v-html="QuestionsPartData.answer"></span>
        </template>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        【题目备注】:
        {{QuestionsPartData.remarks}}
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getQuestionsPart } from '@/api/questions.js'
export default {
  name: 'QuestionsPreview',
  props: {
    question: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      QuestionsPartData: [],
      // 单选题选中的选项
      radio: 1,
      // 多选题选中的选项
      checkList: [],
      isVadio: false
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 基础题库详情
    async getQuestionsPartData() {
      const { data } = await getQuestionsPart(this.question.id)
      console.log(data)
      this.QuestionsPartData = data
      this.checkList = data.options.filter(item => {
        return item.isRight
      })
    }
  },
  created() {
    this.getQuestionsPartData()
  },
  mounted() {}
}
</script>

<style lang='less' scoped>
.questions-preview {
  .el-radio {
    display: block;
    margin: 20px 0;
  }
  .el-row {
    margin: 15px 0;
    .el-col {
      padding-bottom: 5px;
    }
    .question {
      & > span:first-child {
        color: blue;
        p {
          padding: 10px 0;
        }
      }
      .el-checkbox {
        display: block;
        margin: 15px 0;
      }
    }
    .answer {
      display: flex;
    }
  }
  .none {
    display: none;
  }
}
</style>
